<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>21.for循环生成100个div简易版</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			
			.clearfix:after {
				clear: both;
			}
			
			.clearfix {
				*zoom: 1;
			}
			
			.box {
				width: 1010px;
				margin: 50px auto 0;
				position: relative;
			}
			
			.box div {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 99;
				width: 108px;
				height: 108px;
				border: 1px solid #000;
				background-color: #f00;
				line-height: 108px;
				text-align: center;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取外框元素
				var oBox = document.querySelectorAll(".box")[0];
				// 获取里层的div元素
				var aDiv = oBox.getElementsByTagName("div");
				// 用来累加的变量
				var oInner = '';
				// 总长度
				var len = 100;
				// 当前行
				var rows = 10;
				// 当前行的第几个格
				var ceils = 10;
				// 准备四个颜色呗
				var aColors = ['#f00', 'blue', 'pink', '#ccc'];
				
				/** for ( var i = 0; i < len; i++ ) {
					oInner += '<div>' + (i + 1) + '</div>';
				} */
				
				// oBox.innerHTML = oInner;
				
				/** for ( var i = 0; i < aDiv.length; i++ ) {
					aDiv[i].style.left = i * 50 + 'px';
					aDiv[i].style.top = i * 50 + 'px';
				} */
				
				// 循环当前行
				for ( var i = 0; i < rows; i++ ) {
					for ( var j = 0; j < ceils; j++ ) {
						oInner += '<div style="left: '+ (j * 120) +'px; top: '+ (i * 120) +'px; background-color: '+ aColors[((i * 10) + j) % aColors.length] +';">第' + (i + 1) + '行第' + Math.floor(i / 10 + (j + 1)) + '列' + '</div>';
					}
				}
				
				oBox.innerHTML = oInner;
			};
		</script>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
